import React from 'react';
import { history } from 'umi';
import { Button, Card, Col, Row, Typography, Carousel, Statistic } from 'antd';
import {
  TeamOutlined,
  TrophyOutlined,
  DashboardOutlined,
  ArrowRightOutlined,
  CalendarOutlined,
  UserOutlined,
} from '@ant-design/icons';
import styles from './index.less';

const { Title, Paragraph } = Typography;

const HomePage: React.FC = () => {
  // 轮播图数据
  const carouselItems = [
    {
      title: '专业足球训练系统',
      description: '为青少年提供专业的足球训练和发展平台',
      image: 'https://img.freepik.com/free-photo/soccer-players-action-professional-stadium_654080-1130.jpg',
    },
    {
      title: '优秀教练团队',
      description: '拥有丰富经验的专业教练，提供高质量的足球训练',
      image: 'https://img.freepik.com/free-photo/coach-talking-football-team-during-break_23-2149734321.jpg',
    },
    {
      title: '培养足球明星',
      description: '发掘潜力，培养未来的足球之星',
      image: 'https://img.freepik.com/free-photo/young-soccer-team-training-with-coach_23-2149637159.jpg',
    },
  ];

  // 系统统计数据
  const statistics = [
    { title: '注册学员', value: 1280, icon: <UserOutlined /> },
    { title: '专业教练', value: 48, icon: <TeamOutlined /> },
    { title: '训练课程', value: 156, icon: <CalendarOutlined /> },
    { title: '成功案例', value: 326, icon: <TrophyOutlined /> },
  ];

  // 导航卡片数据
  const navigationCards = [
    {
      title: '优秀教练团队',
      description: '了解我们专业的教练团队，他们拥有丰富的执教经验和专业知识',
      icon: <TeamOutlined className={styles.cardIcon} />,
      color: '#1890ff',
      path: '/showcase/excellent-coaches',
    },
    {
      title: '优秀学员展示',
      description: '查看在我们平台上表现突出的足球学员，他们是未来的足球之星',
      icon: <TrophyOutlined className={styles.cardIcon} />,
      color: '#52c41a',
      path: '/showcase/excellent-students',
    },
    {
      title: '系统管理后台',
      description: '管理员入口，用于管理系统用户、课程、评估和其他系统功能',
      icon: <DashboardOutlined className={styles.cardIcon} />,
      color: '#722ed1',
      path: '/user/login',
    },
  ];

  // 页面导航函数
  const navigateTo = (path: string) => {
    history.push(path);
  };

  return (
    <div className={styles.homeContainer}>
      {/* 轮播图区域 */}
      <Carousel autoplay className={styles.carousel}>
        {carouselItems.map((item, index) => (
          <div key={index}>
            <div
              className={styles.carouselItem}
              style={{ backgroundImage: `url(${item.image})` }}
            >
              <div className={styles.carouselContent}>
                <Title level={1} className={styles.carouselTitle}>
                  {item.title}
                </Title>
                <Paragraph className={styles.carouselDescription}>
                  {item.description}
                </Paragraph>
                <Button
                  type="primary"
                  size="large"
                  onClick={() => navigateTo('/user/login')}
                  className={styles.carouselButton}
                >
                  立即加入
                </Button>
              </div>
            </div>
          </div>
        ))}
      </Carousel>

      {/* 统计数据区域 */}
      <div className={styles.statisticsSection}>
        <div className={styles.sectionContainer}>
          <Title level={2} className={styles.sectionTitle}>
            系统概览
          </Title>
          <Row gutter={[32, 32]} className={styles.statisticsRow}>
            {statistics.map((stat, index) => (
              <Col xs={12} sm={12} md={6} key={index}>
                <Card className={styles.statisticCard}>
                  <Statistic
                    title={stat.title}
                    value={stat.value}
                    prefix={stat.icon}
                    valueStyle={{ color: '#1890ff' }}
                  />
                </Card>
              </Col>
            ))}
          </Row>
        </div>
      </div>

      {/* 导航卡片区域 */}
      <div className={styles.navigationSection}>
        <div className={styles.sectionContainer}>
          <Title level={2} className={styles.sectionTitle}>
            功能导航
          </Title>
          <Row gutter={[24, 24]}>
            {navigationCards.map((card, index) => (
              <Col xs={24} sm={24} md={8} key={index}>
                <Card
                  className={styles.navigationCard}
                  onClick={() => navigateTo(card.path)}
                  hoverable
                >
                  <div className={styles.cardIconContainer} style={{ backgroundColor: card.color }}>
                    {card.icon}
                  </div>
                  <Title level={3} className={styles.cardTitle}>
                    {card.title}
                  </Title>
                  <Paragraph className={styles.cardDescription}>{card.description}</Paragraph>
                  <div className={styles.cardAction}>
                    <span>立即访问</span>
                    <ArrowRightOutlined />
                  </div>
                </Card>
              </Col>
            ))}
          </Row>
        </div>
      </div>
{/* 页脚区域 */}
      <div className={styles.footer}>
        <div className={styles.sectionContainer}>
          <Row gutter={[24, 24]}>
            <Col xs={24} sm={24} md={8}>
              <Title level={4} className={styles.footerTitle}>
                关于我们
              </Title>
              <Paragraph className={styles.footerText} style={{ color: 'white' }}>
                足球训练系统致力于为青少年提供专业的足球训练和发展平台，培养未来的足球之星。
              </Paragraph>
            </Col>
            <Col xs={24} sm={12} md={8}>
              <Title level={4} className={styles.footerTitle}>
                联系方式
              </Title>
              <Paragraph className={styles.footerText} style={{ color: 'white' }}>
                地址：北京市海淀区中关村大街1号
                <br />
                电话：010-12345678
                <br />
                邮箱：contact@football-training.com
              </Paragraph>
            </Col>
            <Col xs={24} sm={12} md={8}>
              <Title level={4} className={styles.footerTitle}>
                快速链接
              </Title>
              <ul className={styles.footerLinks}>
                <li>
                  <a onClick={() => navigateTo('/showcase/excellent-coaches')}>优秀教练</a>
                </li>
                <li>
                  <a onClick={() => navigateTo('/showcase/excellent-students')}>优秀学员</a>
                </li>
                <li>
                  <a onClick={() => navigateTo('/user/login')}>系统登录</a>
                </li>
              </ul>
            </Col>
          </Row>
          <div className={styles.copyright}>
            © {new Date().getFullYear()} 足球训练系统 版权所有
          </div>
        </div>
      </div>
    </div>
  );
};

export default HomePage;